<template>
  <swiper
    class="swiper"
    :autoplay="swiper_option.autoplay"
    :loop="swiper_option.loop"
    :speed="swiper_option.speed"
    :pagination="swiper_option.pagination"
  >
    <swiper-slide
      class="swiper-slide"
      v-for="item in piclist"
      :key="item"
    >
      <img class="img" :src="item" />
    </swiper-slide>
  </swiper>
</template>
<script>
import { reactive } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, { Autoplay, Pagination } from "swiper";
import "swiper/swiper.scss";

SwiperCore.use([Autoplay, Pagination]);

export default {
  props: ["piclist"],
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    let swiper_option = reactive({
      autoplay: {
        delay: 1500,
        disableOnInteraction: false,
      },
      loop: true,
      speed: 1000,
      pagination: {
        clickable: true,
      },
    });
    return { swiper_option };
  },
};
</script>
<style lang="sass" scoped>
.swiper
  &-slide
    width: 100%
    .img

      width: 80%
      height: 300px
</style>
